<template>
  <div>
    <scEcharts height="250px" :option="option"></scEcharts>
  </div>
</template>

<script setup>
import scEcharts from "@/components/scEcharts"

let formatNumber = function (num) {
  let reg = /(?=(\B)(\d{3})+$)/g
  return num.toString().replace(reg, ",")
}

const option = ref({
  grid: {
    top: "60px",
    left: "4%",
    right: "4%",
    bottom: "0",
    containLabel: true,
  },
  tooltip: {
    trigger: 'item',
    textStyle: {
      fontSize: 12 // 字体大小
    },
  },
  legend: {
    orient: "horizontal",
    height: "auto",
    top: 6, //调整图例位置
    icon: 'circle',
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 16,
    formatter: function (_name) {
      return `{a|${_name}}`;
    },
    textStyle: {
      color: "#333333",
      fontSize: 12,
      rich: {
        a: {
          verticalAlign: "middle",
          padding: [4, 0, 0, 0],
        },
      },
    },
  },
  series: [
    {
      type: "pie",
      radius: "100%",
      top: 50,
      radius: ["50%", "80%"],
      center: ["50%", "50%"],
      label: {
        show: true,
      },
      data: [
        { value: 1048, name: "0-12岁" },
        { value: 735, name: "13-24岁" },
        { value: 580, name: "25-48岁" },
        { value: 780, name: "40-60岁" },
        { value: 280, name: "60岁以上" },
      ],
      itemStyle: {
        borderColor: "#fff",
        borderWidth: 2,
      },
      labelLine: {
        length: 10,
        length2: 120,
        lineStyle: {
          color: "#e6e6e6",
        },
      },
      label: {
        formatter: (params) => {
          return (
            "{icon|●}{name|" +
            params.name +
            "}\n{value|" +
            formatNumber(params.value) +
            "}"
          );
        },
        padding: [0, -120, 0, -120],
        rich: {
          icon: {
            fontSize: 12,
            padding: [0, 0, 10, 0],
          },
          name: {
            fontSize: 12,
            padding: [0, 10, 10, 4],
            color: "#666666",
          },
          value: {
            fontSize: 12,
            fontWeight: "bold",
            padding: [0, 60, 0, 10],
            color: "#333333",
          },
        },
      },
    },
  ],
})
</script>

<style></style>
